<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Spring, Block, and Bullet</title>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Set a white background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // General drawing styles
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // Define dimensions and positions
        const wallX = 80;
        const groundY = 320;
        const canvasWidth = canvas.width;

        // Draw the horizontal surface (ground)
        ctx.beginPath();
        ctx.moveTo(wallX, groundY);
        ctx.lineTo(canvasWidth - 50, groundY);
        ctx.stroke();

        // Draw hatch marks for the ground
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        for (let i = wallX; i < canvasWidth - 50; i += 25) {
            ctx.moveTo(i, groundY);
            ctx.lineTo(i + 15, groundY + 15);
        }
        ctx.stroke();

        // Draw the vertical wall
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.moveTo(wallX, groundY);
        ctx.lineTo(wallX, 100);
        ctx.stroke();

        // Draw hatch marks for the wall
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        for (let i = groundY; i > 100; i -= 25) {
            ctx.moveTo(wallX, i);
            ctx.lineTo(wallX - 15, i - 15);
        }
        ctx.stroke();

        // Define block properties
        const blockWidth = 160;
        const blockHeight = 130;
        const blockX = 400; // Left face x-coordinate
        const blockY = groundY - blockHeight;

        // Draw the block
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.strokeRect(blockX, blockY, blockWidth, blockHeight);

        // Define spring properties
        const springY = groundY - blockHeight / 2;
        const springStartX = wallX;
        const springEndX = blockX;
        const springCoils = 10;
        const springAmplitude = 20;

        // Function to draw the spring (wavy line)
        function drawSpring(context, x1, y, x2, coils, amplitude) {
            const length = x2 - x1;
            const segmentLength = length / (coils * 2);
            context.beginPath();
            context.moveTo(x1, y);
            for (let i = 0; i < coils * 2; i++) {
                const sign = (i % 2 === 0) ? -1 : 1; // Alternate up and down
                const controlX = x1 + (i + 0.5) * segmentLength;
                const endX = x1 + (i + 1) * segmentLength;
                context.quadraticCurveTo(controlX, y + sign * amplitude, endX, y);
            }
            context.stroke();
        }

        // Draw the spring
        drawSpring(ctx, springStartX, springY, springEndX, springCoils, springAmplitude);
        
        // Define the bullet/arrow object properties
        const objY = springY;
        const objColor = 'dimgray';

        // The object is composed of a rectangle and an arrow (line + head)
        // Positions are defined from right to left
        const rectBodyW = 30;
        const rectBodyH = 18;
        const rectBodyX = 680; // Right side of the rectangle
        const rectBodyY = objY - rectBodyH / 2;

        const lineLen = 40;
        const lineEndX = rectBodyX - rectBodyW;
        const lineStartX = lineEndX - lineLen;

        const headLen = 12;
        const headH = 12;
        const headX = lineStartX; // Tip of the arrowhead

        ctx.fillStyle = objColor;
        ctx.strokeStyle = objColor;

        // Draw the rectangular body
        ctx.beginPath();
        ctx.fillRect(rectBodyX - rectBodyW, rectBodyY, rectBodyW, rectBodyH);
        
        // Draw the arrow line
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.moveTo(lineStartX, objY);
        ctx.lineTo(lineEndX, objY);
        ctx.stroke();
        
        // Draw the arrowhead (filled triangle pointing left)
        ctx.beginPath();
        ctx.moveTo(headX, objY);
        ctx.lineTo(headX + headLen, objY - headH / 2);
        ctx.lineTo(headX + headLen, objY + headH / 2);
        ctx.closePath();
        ctx.fill();

    </script>
</body>
</html>